<template>
  <!--消息列表-->
  <div class="newmesses">
    <el-card class="box-card">
      <p>最新消息</p>

      <!-- 内容 -->
      <div class="centent">
        <div class="text">
          <ul v-for="(item, index) in lists" :key="index">
            <li>
              <el-button type="success" round size="mini">公告</el-button>
              <router-link to="/News1">{{ item }}</router-link>
            </li>
          </ul>
        </div>

        <div class="text2">
          <p>最新资源</p>
          <div class="text">
            <ul v-for="(item, index) in lists1" :key="index">
              <li>
                <el-button type="success" round size="mini">资源</el-button>
                <router-link to="">{{ item }}</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists: [
        "关于新生（含专升本）办理借阅权限通知",
        "图书馆关于下载使用“移动图书馆”服务的通知",
        "图书馆第八届读书主题活动之网页设计大赛暨我院第七届“计算机文化节”网页设计大赛决赛圆满落幕",
        "图书馆启动“读书分享园地”",
        "图书馆关于寒假图书借还的通知",
      ],
      lists1: [
        "我院图书馆举行中国知网（CNKI）系列数据库知识讲座",
        "我馆与教育学院图书馆召开业务交流会",
        "图书捐赠倡议书",
        "图书馆新进一批关于计算机的图书",
        "自建特色资源库（亚非语言原版图书库 、东盟文献库 、壮学文献信息库 、壮侗语族语言文学数据库 、广西作家文库 、广西世居民族视频库）",
      ],
    };
  },
};
</script>
 <style >
 .centent .text ul li a{
   text-decoration: none;
  color: #9a9d9e;
 }

a{
  text-decoration: none;
}

.centent .text ul li a:hover{
  text-decoration: underline;
  color: rgb(72, 72, 155);
  
}
.newmesses {
  position: relative;
  width: 1200px;
  margin: 10px auto;
}
.centent {
  display: flex;
  flex-direction: row;
}
.centent .text {
  width: 350px;
  margin-left: 50px;
  border-left: 1px solid red;
}
.centent .text ul li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.centent .text2 {
  margin-left: 250px;
}
.newmesses .box-card {
  position: relative;
}
.newmesses .box-card p:first-child {
  position: absolute;
}
.newmesses .box-card p {
  display: flex;
  color: black;
  font-size: 25px;
  width: 20px;
  padding-top: 30px;
}

.centent .text .el-button{
    margin-right: 20px;
}
</style>